import echarts from 'echarts'

export const scrollableTooltipPositionFunc = function (point, params, dom, rect, size) {
  // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
  // 提示框位置
  var x = 0 // x坐标位置
  var y = 0 // y坐标位置

  // 当前鼠标位置
  var pointX = point[0]
  var pointY = point[1]

  // 提示框大小
  var boxWidth = size.contentSize[0]
  var boxHeight = size.contentSize[1]

  // boxWidth > pointX 说明鼠标左边放不下提示框
  if (boxWidth > pointX) {
    x = 5
  } else { // 左边放的下
    x = pointX - boxWidth
  }

  // boxHeight > pointY 说明鼠标上边放不下提示框
  if (boxHeight > pointY) {
    y = 5
  } else { // 上边放得下
    y = pointY - boxHeight
  }

  return [x, y]
}

export const scrollableTooltip = {
  trigger: 'axis',
  enterable: true, // 鼠标是否可进入提示框浮层中
  hideDelay: 200, // 浮层隐藏的延迟
  confine: true,
  position: scrollableTooltipPositionFunc,
  backgroundColor: 'rgba(255,255,255, 1)',
  formatter: function (params) {
    var htmlStr = '<div style="height: auto;max-height: 240px;overflow-y: auto;"><p style="color:black;">' + params[0].axisValueLabel + '</p>'
    for (var i = 0; i < params.length; i++) {
      htmlStr += '<p style="color: #666;">' + params[i].marker + params[i].seriesName + ':' + params[i].value + '</p>'
    }
    htmlStr += '</div>'
    return htmlStr
  },
  extraCssText: 'box-shadow: 0 0 3px rgba(150,150,150, 0.7);',
  textStyle: {
    fontSize: 12,
    color: '#fff'
  }
}

export const timeAxisLabel = { // 坐标轴标签样式设置
  formatter: function(value, index) { // 坐标轴文字展示样式处理
    return echarts.format.formatTime('yyyy-MM-dd hh:mm', value)
  }
}
